<template>
  <div class="contentShadow">
    <el-container>
      <el-header>
        <h1>个人学年总结</h1>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
          <el-table-column prop="id" label="序号" type="index" :index="indexMethod" align="center">
          </el-table-column>
          <el-table-column prop="studentId" label="学号" align="center">
          </el-table-column>
          <el-table-column prop="studentName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="tag" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag
                  v-if="tableData[scope.$index + 1 + (currentPage - 1) * pageSize - 1].grade === null"
                  type="warning"
                  style="width: 60px;"
              >未测评
              </el-tag>
              <el-tag
                  v-else
                  type="success"
                  style="width: 60px;"
              >{{ tableData[scope.$index + 1 + (currentPage - 1) * pageSize - 1].grade }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="assess(scope.$index)">测评
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
          <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="currentPage" :page-sizes="[1, 5, 10, 20, 50]" :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
            <!--                layout="total, sizes, prev, pager, next, jumper" :total="totalNum">-->
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {acquireAllStudentsSingleScore} from "@/api/judge";

export default {
  data() {
    return {
      // totalNum: 100,
      // totalNum: this.tableData.length,
      tableData: [
        {
          studentId: "2200012345",
          studentName: "张三",
          grade: '',
        },
        {
          studentId: "2200012346",
          studentName: "李四",
          grade: 4,
        },
        {
          studentId: "2200012347",
          studentName: "王五",
          grade: '',
        },
        {
          studentId: "2200012348",
          studentName: "赵六",
          grade: 3,
        },
        {
          studentId: "2200012349",
          studentName: "马化腾",
          grade: '',
        },
        {
          studentId: "2200012350",
          studentName: "马云",
          grade: 2,
        },
      ],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5 // 每页的数据条数
    };
  },
  mounted() {
    acquireAllStudentsSingleScore({type: 1}).then(res => {
      console.log(res.data)
      this.tableData = res.data
    })
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //生成自增的序号
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    //点击评测跳转
    assess(index) {
      const item = index + 1 + (this.currentPage - 1) * this.pageSize - 1;
      let routeUrl = this.$router.resolve({
            path: "/judge/assess/summary?studentID=" + this.tableData[item].studentId,
            //path: "/rbac/judge/assess-summary/assess",
            //query: this.tableData
          })
      ;
      window.open(routeUrl.href, '_blank');
      //window.open('summary.html?studentID=' + this.tableData[item].studentID);
    },
    judgeType() {

    },
  }
};

//点击评测跳转
</script>

<style>
@import '../../style/contentShadow.css';
</style>
